<template>
  <div>
    <eagle-popup
      title="选择依据"
      round
      position="bottom"
      :popStyle="{ height: '80%' }"
      v-bind="$attrs"
      v-on="$listeners"
      ref="eaglePopup"
    >
      <div class="main">
        <van-tabs
          v-if="!show2"
          v-model="idx"
          title-active-color="#fff"
          color="rgb(155, 226, 237)"
          title-inactive-color="#ccc"
          background="#383d40"
          line-width="80"
          @change="changeTabs"
        >
          <van-tab
            :title="item.title"
            v-for="(item, index) in title"
            :key="index"
          >
            <div class="main-content">
              <div v-if="index == 0 || index == 1">
                <van-dropdown-menu>
                  <van-dropdown-item v-model="value1" :options="option1" />
                </van-dropdown-menu>
                <van-tree-select
                  height="100vh"
                  :items="list"
                  :main-active-index.sync="active"
                  @click-nav="clickNav"
                >
                  <template #content>
                    <div class="ins_content">
                      <div
                        class="imgs-list"
                        v-for="(v, i) in children"
                        :key="i"
                      >
                        <img
                          :src="baseUrl + v.Logo"
                          alt=""
                          @click.stop="_goClassifysDetail(v)"
                        />
                        <div class="imgs-list-text">
                          {{ v.text }}
                        </div>
                      </div>
                    </div>
                  </template>
                </van-tree-select>
              </div>
              <div v-if="index == 2 || index == 3 || index == 5">
                <div v-if="historyList.length">
                  <div
                    v-for="(v, i) in historyList"
                    :key="i"
                    class="history-content"
                  >
                    <div>
                      <div class="history-title">
                        【检查对象】{{ v.CFullName }}
                      </div>
                      <div class="line"></div>
                      <div class="history-title">【关键词】{{ v.Keyword }}</div>
                      <div class="line"></div>
                      <div>【隐患描述】{{ v.HiddenDangerDesc }}</div>
                      <div>【整改建议】{{ v.CorrectiveAdvise }}</div>
                      <div class="apply-area">
                        <div class="detail-collect">
                          <img
                            src="@/assets/Images/AppIcon/icon_list_industry.png"
                            alt=""
                          />
                          <span>适用地区:{{ v.ApplyArea }}</span>
                        </div>
                      </div>
                      <div class="apply-area">
                        <div class="detail-collect" v-if="index == 5">
                          <div @click="getDetail(v)">
                            <img
                              src="@/assets/Images/AppIcon/icon_list_detail.png"
                              alt=""
                            />
                            <span>详细</span>
                          </div>

                          <div @click="Interest(v)">
                            <img
                              src="@/assets/Images/AppIcon/icon_list_tracking.png"
                              alt=""
                            />
                            <span>取消忽略该依据</span>
                          </div>
                        </div>
                        <div class="detail-collect" v-else>
                          <div @click.stop="opendetial(v)">
                            <img
                              src="@/assets/Images/AppIcon/icon_list_detail.png"
                              alt=""
                            />
                            <span>详细1223</span>
                          </div>

                          <div v-if="v.IsCollected" @click="unCollected(v)">
                            <img
                              src="@/assets/Images/AppIcon/icon_list_collect.png"
                              alt=""
                            />
                            <span>取消收藏</span>
                          </div>
                          <div v-else @click="Collect(v)">
                            <img
                              src="@/assets/Images/AppIcon/icon_list_notcollect.png"
                              alt=""
                            />
                            <span>收藏</span>
                          </div>
                        </div>
                        <div
                          class="take-photo"
                          v-if="hasPhoto"
                          @click.stop="goPhoto(v)"
                        >
                          <van-uploader
                            @oversize="onOversize"
                            :after-read="afterRead"
                            capture="camera"
                          >
                            <img
                              src="@/assets/Images/AppIcon/icon_camera.png"
                              alt=""
                            />
                            <span>拍照</span>
                          </van-uploader>
                        </div>
                        <div
                          @click="chooseClassifys(v)"
                          class="take-photo"
                          v-else
                        >
                          <img
                            src="@/assets/Images/AppIcon/icon_list_add.png"
                            alt=""
                          />
                          <span>选择</span>
                        </div>
                        <!-- <div class="take-photo">
                                                        <img src="@/assets/Images/AppIcon/icon_camera.png" alt="" />
                                                        <span>拍照</span>
                                                    </div> -->
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else>
                  <img
                    class="none-data"
                    src="@/assets/Images/AppIcon/common_empty_data.png"
                    alt=""
                  />
                </div>
              </div>
              <div v-if="index == 4">
                <div>
                  <div v-if="historyList.length" style="padding-bottom: 40px">
                    <div
                      v-for="(v, i) in historyList"
                      :key="i"
                      class="history-content"
                    >
                      <div>
                        <div class="history-title">
                          【关键词】{{ v.Keyword }}
                        </div>
                        <div class="line"></div>
                        <div>【隐患描述】{{ v.HiddenDangerDesc }}</div>
                        <div>【整改建议】{{ v.CorrectiveAdvise }}</div>

                        <div class="apply-area">
                          <div class="detail-collect">
                            <div @click="getDetail(v)">
                              <img
                                src="@/assets/Images/AppIcon/icon_list_detail.png"
                                alt=""
                              />
                              <span>详细12</span>
                            </div>

                            <div v-if="v.IsCollected" @click="unCollected(v)">
                              <img
                                src="@/assets/Images/AppIcon/icon_list_collect.png"
                                alt=""
                              />
                              <span>取消收藏</span>
                            </div>
                            <div v-else @click="Collect(v)">
                              <img
                                src="@/assets/Images/AppIcon/icon_list_notcollect.png"
                                alt=""
                              />
                              <span>收藏</span>
                            </div>
                          </div>
                          <!-- <div class="take-photo" @click="goPhoto(v)">
                                                            <van-uploader
                                                                @oversize="onOversize"
                                                                :after-read="afterRead"
                                                                capture="camera"
                                                            >
                                                                <img
                                                                    src="@/assets/Images/AppIcon/icon_camera.png"
                                                                    alt=""
                                                                />
                                                                <span>拍照</span>
                                                            </van-uploader>
                                                        </div> -->
                          <div
                            class="take-photo"
                            v-if="hasPhoto"
                            @click="goPhoto(v)"
                          >
                            <van-uploader
                              @oversize="onOversize"
                              :after-read="afterRead"
                              capture="camera"
                            >
                              <img
                                src="@/assets/Images/AppIcon/icon_camera.png"
                                alt=""
                              />
                              <span>拍照</span>
                            </van-uploader>
                          </div>
                          <div
                            class="take-photo"
                            @click="chooseClassifys(v)"
                            v-else
                          >
                            <img
                              src="@/assets/Images/AppIcon/icon_list_add.png"
                              alt=""
                            />
                            <span>选择</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-else>
                    <img
                      class="none-data"
                      src="@/assets/Images/AppIcon/common_empty_data.png"
                      alt=""
                    />
                  </div>
                  <!-- <van-button
                                                class="add-btn"
                                                type="primary"
                                                square
                                                @click="_goEditDanger"
                                                >添加手动依据</van-button
                                            > -->
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>

        <!-- 弹出层 -->
        <van-dialog v-model="show" :showConfirmButton="false">
          <div class="dialog-content">
            <div class="dialog-title">详细信息</div>
            <div class="dialog-content-text">
              <div class="gist-source">
                <span class="dialog-description">来源：</span
                >{{ detail.GistSource }}
              </div>
              <div class="gist-source">
                <span class="dialog-description">隐患描述：</span
                >{{ detail.HiddenDangerDesc }}
              </div>
              <div class="gist-source">
                <span class="dialog-description">整改建议：</span
                >{{ detail.CorrectiveAdvise }}
              </div>
              <div class="gist-source">
                <span class="dialog-description">适用地区：</span
                >{{ detail.ApplyArea }}
              </div>
              <div class="gist-source">
                <span class="dialog-description">适用行业：</span
                >{{ detail.ApplyProfessionName }}
              </div>
              <div class="gist-source">
                <span class="dialog-description">法律责任：</span
                >{{ detail.LegalLiability }}
              </div>
              <div class="gist-source">
                <span class="dialog-description">法律原文：</span
                >{{ detail.OriginalText }}
              </div>
              <div class="gist-source">
                <span class="dialog-description">法律法规：</span>
                <div
                  class="text-list"
                  v-for="(v, i) in detail.TextList"
                  :key="i"
                  @click="toDetail(v)"
                >
                  {{ v.Name }}
                </div>
              </div>
            </div>
            <div class="dialog-bottom">
              <div></div>
              <div>
                <span @click="close">取消</span>
                <span class="complete-btn" @click="confirm">确定</span>
              </div>
            </div>
          </div>
        </van-dialog>
        <!-- 详情 -->
        <div class="classifys-detail" v-if="show2">
          <div class="classifys-detail-search">
            <van-search
              class="info_search"
              v-model="value"
              @search="onSearch"
              @clear="clearSearch"
              placeholder="搜索"
            />
          </div>
          <van-tabs @click="onClick">
            <van-tab
              v-for="(item, index) in classifysChildren"
              :title="item.text"
              :name="item.CCode"
              :key="index"
            >
              <van-list
                style="margin: 10px"
                :finished="finished"
                v-model="loading"
                finished-text="没有更多了"
                @load="onLoad"
              >
                <div v-if="historyList.length">
                  <div
                    v-for="(v, i) in historyList"
                    :key="i"
                    class="history-content"
                  >
                    <!-- <div class="history-title">【检查对象】{{ v.CFullName }}</div>
                                    <div class="line"></div> -->
                    <div class="history-title">【关键词】{{ v.Keyword }}</div>
                    <div class="line"></div>
                    <div>【隐患描述】{{ v.HiddenDangerDesc }}</div>
                    <div>【整改建议】{{ v.CorrectiveAdvise }}</div>
                    <div class="apply-area">
                      <div class="detail-collect">
                        <img
                          src="@/assets/Images/AppIcon/icon_list_industry.png"
                          alt=""
                        />
                        <span>适用地区:{{ v.ApplyArea }}</span>
                      </div>
                    </div>
                    <div class="apply-area">
                      <div class="detail-collect">
                        <div @click="getDetail(v)">
                          <img
                            src="@/assets/Images/AppIcon/icon_list_detail.png"
                            alt=""
                          />
                          <span>详细</span>
                        </div>

                        <div v-if="v.IsCollected" @click="unCollected(v)">
                          <img
                            src="@/assets/Images/AppIcon/icon_list_collect.png"
                            alt=""
                          />
                          <span>取消收藏</span>
                        </div>
                        <div v-else @click="Collect(v)">
                          <img
                            src="@/assets/Images/AppIcon/icon_list_notcollect.png"
                            alt=""
                          />
                          <span>收藏</span>
                        </div>
                        <div @click="Ignored(v)" v-if="hasPhoto">
                          <img
                            src="@/assets/Images/AppIcon/icon_list_ignore.png"
                            alt=""
                          />
                          <span>忽略该依据</span>
                        </div>
                      </div>

                      <div
                        class="take-photo"
                        v-if="hasPhoto"
                        @click="goPhoto(v)"
                      >
                        <van-uploader
                          @oversize="onOversize"
                          :after-read="afterRead"
                          capture="camera"
                        >
                          <img
                            src="@/assets/Images/AppIcon/icon_camera.png"
                            alt=""
                          />
                          <span>拍照</span>
                        </van-uploader>
                      </div>
                      <div
                        @click="chooseClassifys(v)"
                        class="take-photo"
                        v-else
                      >
                        <img
                          src="@/assets/Images/AppIcon/icon_list_add.png"
                          alt=""
                        />
                        <span>选择</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else>
                  <img
                    class="none-data"
                    src="@/assets/Images/AppIcon/common_empty_data.png"
                    alt=""
                  />
                </div>
              </van-list>
            </van-tab>
          </van-tabs>
        </div>
        <van-dialog v-model="libShow" :showConfirmButton="false">
          <div class="dialog-content">
            <div class="dialog-title">{{libTitle}}</div>
            <div class="dialog-content-text">
              
            </div>
          </div>
        </van-dialog>
      </div>
    </eagle-popup>
  </div>
</template>
<script>
import {
  getClassifys,
  getHistoryFrequency,
  Collect,
  unCollected,
  getDetail,
  Interest,
  UnInterested,
} from "@/api/dangerLawGist";
import { mapGetters } from "vuex";
import { upload } from "@/api/common";
export default {
  props: {
    isShow: {
      type: Boolean,
      required: false,
    },
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_IMG,
      idx: 0,
      active: 0,
      filter: {
        type: "PublicUsed",
      },
      list: [],
      children: [],
      title: [
        { title: "常用依据" },
        { title: "专业依据" },
        { title: "我的收藏" },
        { title: "历史依据" },
        { title: "手动依据" },
      ],
      value1: 0,
      value2: "a",
      option1: [
        { text: "全部", value: 0 },
        { text: "通用", value: 1 },
        { text: "行业专属", value: 2 },
      ],
      historyList: [],
      param: {
        page: 0,
        dataType: "",
      },
      show: false,
      detail: {},
      vobj: {},
      fileList: [],
      id: "",
      dataType: "PublicUsed",
      hasPhoto: false,
      // 详情
      value: "",
      finished: false,
      loading: false,
      form: {
        page: 0,
        dataType: "PublicUsed",
        cCode: "",
      },
      historyList: [],
      show: false,
      detail: {},
      vobj: {},
      fileList: [],
      detailId: "",
      classifysChildren: [],
      libShow: false,
      libTitle:"",
      show2:false,
    };
  },
  created() {
    if (this.$route.query.hasPhoto) {
      this.hasPhoto = this.$route.query.hasPhoto;
    }
    if (this.$route.params.id || this.$route.params.id == 0) {
      this.id = this.$route.params.id;
      const ClassifysData = this.$route.params;
      this.$store.commit("setClassifysData", ClassifysData);
    }
    this.getClassifys();
    // this.detailShow = this.isShow
  },
  methods: {
    // 搜索
    goSearch() {
      this.$router.push({
        name: "ClassifysSearch",
        query: {
          dataType: this.dataType,
          hasPhoto: this.hasPhoto,
        },
      });
    },
    goPhoto(item) {
      this.vobj = item;
    },
    // 上传图片
    afterRead(file) {
      let params = new FormData(); //创建form对象
      params.append("file", file.file);
      upload(params)
        .then((res) => {
          res.data.forEach((item) => {
            this.fileList.push(item.FilePath);

            this.$router.push({
              name: "DangerCheckTaskDetailEdit",
              params: {
                file: item.FilePath,
                vobj: this.vobj,
                addId: 0,
              },
            });
          });
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    onOversize(file) {
      Toast("文件大小不能超过 2M");
    },
    getClassifys() {
      getClassifys(this.filter).then((res) => {
        const data = this.toTreeList(res.data);
        console.log(data, "data");

        this.list = data;
        this.children = this.list[0].children;
      });
    },
    // 历史依据
    getHistoryFrequency() {
      getHistoryFrequency(this.param).then((res) => {
        // console.log(res, 'res')
        this.historyList = res.data.Data;
      });
    },
    // 收藏
    Collect(item) {
      const param = {
        lgCode: item.LGCode,
      };
      Collect(param).then((res) => {
        // console.log(res, 'res')
        this.param.page = 0;
        this.param.dataType = "HistoryFrequency";
        this.getHistoryFrequency();
      });
    },
    // 取消收藏
    unCollected(item) {
      const param = {
        lgCode: item.LGCode,
      };
      unCollected(param).then((res) => {
        // console.log(res, 'res')
        if (this.idx == 2) {
          this.param.page = 0;
          this.param.dataType = "MyCollect";
          this.getHistoryFrequency();
        }
        if (this.idx == 3) {
          this.param.page = 0;
          this.param.dataType = "HistoryFrequency";
          this.getHistoryFrequency();
        }
      });
    },
    // 详细getDetail
    getDetail(item) {
      
      const param = {
        lgCode: item.LGCode,
      };
      this.show = true;
      getDetail(param).then((res) => {
        res.data.TextList = JSON.parse(res.data.TextList);
        this.detail = res.data;
      });
    },
    // 关闭
    close() {
      
      this.show = false;
    },
    confirm() {
      this.show = false;
    },
    // 切换顶部changeTabs
    changeTabs(val) {
      switch (val) {
        case 0:
          this.filter.type = "PublicUsed";
          this.dataType = "PublicUsed";
          this.getClassifys();
          break;
        case 1:
          this.filter.type = "Public";
          this.dataType = "Public";
          this.getClassifys();
          break;

        case 2:
          this.param.page = 0;
          this.param.dataType = "MyCollect";
          this.dataType = "MyCollect";
          this.getHistoryFrequency();
          break;
        case 3:
          this.param.page = 0;
          this.param.dataType = "HistoryFrequency";
          this.dataType = "HistoryFrequency";
          this.getHistoryFrequency();
          break;
        case 4:
          this.param.page = 0;
          this.param.dataType = "Company";
          this.dataType = "Company";
          this.getHistoryFrequency();
          break;
        case 5:
          this.param.page = 0;
          this.param.dataType = "UnInterested";
          this.dataType = "UnInterested";
          this.getHistoryFrequency();
          break;
      }
      this.idx = val;
    },
    clickNav(index) {
      this.active = index;
      this.children = this.list[index].children;
    },
    // 打开pdf
    toDetail(item) {
      // toDetail({id:item.id}).then(res=>{
      // 	console.log(res,'res');
      // })
    },
    // 处理数据
    toTreeList(data) {
      var result = [];
      if (!Array.isArray(data)) {
        return result;
      }
      data.forEach((item) => {
        delete item.children;
      });
      let map = {};
      data.forEach((item) => {
        map[item.CNo] = item;
      });

      data.forEach((item) => {
        let parent = map[item.CPNo];
        item.text = item.CName;
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          result.push(item);
        }
      });
      return result;
    },
    goIndustryDescribe() {
      this.$router.push("/BaseInfo/IndustryDescribe");
    },
    // 添加手动依据
    _goEditDanger() {
      this.$router.push("/Danger/EditDanger");
    },
    // 检查依据详情
    _goClassifysDetail(item) {
      
      console.log(item, "item");
      if (item.children) {
        this.classifysChildren = [
          {
            CCode: item.CCode,
            CFullName: null,
            CName: "全部",
            CNo: "",
            CPNo: "",
            Checked: null,
            DangerLawCount: null,
            ID: null,
            Logo: null,
            text: "全部",
          },
          ...item.children,
        ];
      } else {
        this.classifysChildren = [
          {
            CCode: item.CCode,
            CFullName: null,
            CName: "全部",
            CNo: "",
            CPNo: "",
            Checked: null,
            DangerLawCount: null,
            ID: null,
            Logo: null,
            text: "全部",
          },
        ];
      }

      // this.$router.push(
      // 	'/Danger/ClassifysDetail?cCode=' +
      // 		item.CCode +
      // 		'&hasPhoto=' +
      // 		this.hasPhoto
      // )
      this.form.cCode = item.CCode;
      this.show2 = true;
      //this.libTitle = item.CName;
      //this.libShow = true;
      
      this.getClassifysDetail(item.CName);
      //this.show=true;
      //this.$emit("callback", "", true);
    },
    // 取消忽略
    Interest(v) {
      const param = {
        lgCode: v.LGCode,
      };
      const _this = this;
      this.$dialog
        .confirm({
          title: "询问",
          message: "确定要忽略此条依据吗？",
        })
        .then(() => {
          Interest(param).then((res) => {
            _this.getHistoryFrequency();
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    onClick(name, title) {
      this.filter.cCode = name;
      this.filter.page = 0;
      this.getHistoryFrequency();
    },

    // 依据详情
    onSearch() {
      this.form.page = 0;
      this.form.keywords = this.value;
      this.getClassifysDetail();
    },
    clearSearch() {
      this.form.page = 0;
      this.form.keywords = "";
      this.getClassifysDetail();
    },
    // 选择检查依据
    chooseClassifys(item) {
      // if (this.id || this.id == 0) {
      // 	this.$router.push({
      // 		name: this.$route.params.path,
      // 		params: {
      // 			classifysData: item,
      // 		},
      // 	})
      // }
      // this.id = this.$store.state.ClassifysData.id
      // const path = this.$store.state.ClassifysData.path
      // if (this.id || this.id == 0) {
      // 	this.$router.push({
      // 		name: path,
      // 		params: {
      // 			classifysData: item,
      // 			id: this.id,
      // 		},
      // 	})
      // }

      this.classifysData = item;
      this.$emit("callback", item, false);
      this.ClassifysShow = false;
    },
    goPhoto(item) {
      this.vobj = item;
    },
    // 上传图片
    afterRead(file) {
      let params = new FormData(); //创建form对象
      params.append("file", file.file);
      upload(params)
        .then((res) => {
          res.data.forEach((item) => {
            this.fileList.push(item.FilePath);

            this.$router.push({
              name: "DangerCheckTaskDetailEdit",
              params: {
                file: item.FilePath,
                vobj: this.vobj,
                addId: 0,
              },
            });
          });
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    onOversize(file) {
      Toast("文件大小不能超过 2M");
    },
    onLoad() {
      this.loading = true;
      ++this.form.page;
      getHistoryFrequency(this.form).then((res) => {
        this.loading = false;
        this.form.page = res.data.PageIndex;
        this.historyList = this.historyList.concat(res.data.Data);
        if (!res.data.HasNextPage) {
          this.finished = true;
        }
      });
    },
    // 详情
    getClassifysDetail(name) {
      this.loading = true;
      getHistoryFrequency(this.form).then((res) => {
        // console.log(res, 'res')
        this.loading = false;
        if (!res.data.HasNextPage) {
          this.finished = true;
        }
        this.form.page = res.data.PageIndex;
        this.historyList = res.data.Data;
      });
    },
    // 收藏
    // Collect(item) {
    // 	const param = {
    // 		lgCode: item.LGCode,
    // 	}
    // 	Collect(param).then((res) => {
    // 		// console.log(res, 'res')
    // 		this.filter.page = 0

    // 		this.getHistoryFrequency()
    // 	})
    // },
    // // 取消收藏
    // unCollected(item) {
    // 	const param = {
    // 		lgCode: item.LGCode,
    // 	}
    // 	unCollected(param).then((res) => {
    // 		// console.log(res, 'res')
    // 		this.filter.page = 0

    // 		this.getHistoryFrequency()
    // 	})
    // },
    // 详细getDetail
    getDetail(item) {
      
      const param = {
        lgCode: item.LGCode,
      };
      this.show = true;
      // getDetail(param).then((res) => {
      //   res.data.TextList = JSON.parse(res.data.TextList);
      //   this.detail = res.data;
      // });
    },
    opendetial(){
       this.show = true;
    },
    Ignored(item) {
      const param = {
        lgCode: item.LGCode,
      };
      const _this = this;
      this.$dialog
        .confirm({
          title: "询问",
          message: "确定要忽略此条依据吗？",
        })
        .then(() => {
          UnInterested(param).then((res) => {
            _this.getHistoryFrequency();
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 关闭
    // close() {
    // 	this.show = false
    // },
    // confirm() {
    // 	this.show = false
    // },
  },
};
</script>
<style lang="less" scoped>
.main-content {
  min-height: 100vh;
  background-color: #e8f1f8;
}

.van-sidebar-item__text {
  width: 70px !important;
}
.ins_content {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  .imgs-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33.33%;
    margin-bottom: 20px;
    img {
      width: 50px;
      height: 50px;
      margin-bottom: 10px;
    }
    .imgs-list-text {
      display: flex;
      justify-content: center;
      width: 100%;
      font-size: 12px;
    }
  }
}

.history-content {
  overflow: hidden;
  padding: 10px;
  background-color: #fff;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.3;
  .line {
    width: 100%;
    height: 0.5px;
    background-color: #eee;
    margin: 5px;
  }
}
.apply-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
  .detail-collect,
  .take-photo {
    display: flex;
    align-items: center;

    > div {
      font-size: 14px;
      display: flex;
      align-items: center;
      margin-right: 30px;
    }
  }
  img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
  .take-photo {
    img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
      vertical-align: middle;
    }
  }
}
// 手动依据
.add-btn {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
.none-data {
  width: 100%;
  height: 100%;
}
// 弹框
.dialog-content {
  position: relative;

  padding: 40px 0;

  .dialog-title,
  .dialog-bottom {
    width: 100%;
    position: fixed;
    left: 0;
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
    font-size: 16px;
    background-color: #fff;
  }
  .dialog-title {
    top: 0;
  }
  .dialog-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    bottom: 0;
    padding: 0 15px;
    span {
      font-size: 14px;
      color: #666;
    }
    .complete-btn {
      color: rgb(0, 141, 101);
      margin-left: 20px;
    }
  }
}
.dialog-content-text {
  height: 50vh;
  overflow-y: auto;
  padding: 3px 15px;
  font-size: 13px;
  color: #666;
  .gist-source {
    margin-bottom: 15px;
    line-height: 1.3;
  }
  .gist-source:last-child {
    margin-bottom: 0;
  }
  .text-list {
    margin-top: 5px;
    color: rgb(0, 141, 101);
  }
  .dialog-description {
    color: #000;
  }
}
.dialog-content-text::-webkit-scrollbar {
  display: none;
}

// 详情

.classifys-detail {
  min-height: 100vh;
  background-color: #e8f1f8;

  .all_dep {
    background-color: #ffffff;
  }

  .history-content {
    overflow: hidden;
    padding: 10px;
    background-color: #fff;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.3;
    .line {
      width: 100%;
      height: 0.5px;
      background-color: #eee;
      margin: 5px;
    }
  }
  .none-data {
    width: 100%;
    height: 100%;
  }

  .apply-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    .detail-collect {
      display: flex;
      align-items: center;

      > div {
        font-size: 14px;
        display: flex;
        align-items: center;
        margin-right: 10px;
      }
    }
    .take-photo {
      display: flex;
      align-items: center;
      img {
        width: 16px;
        height: 18px;
        vertical-align: middle;
      }
    }
    img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }
  // 弹框
  .dialog-content {
    position: relative;

    padding: 40px 0;

    .dialog-title,
    .dialog-bottom {
      width: 100%;
      position: fixed;
      left: 0;
      height: 40px;
      line-height: 40px;
      padding-left: 15px;
      font-size: 16px;
      background-color: #fff;
    }
    .dialog-title {
      top: 0;
    }
    .dialog-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      bottom: 0;
      padding: 0 15px;
      span {
        font-size: 14px;
        color: #666;
      }
      .complete-btn {
        color: rgb(0, 141, 101);
        margin-left: 20px;
      }
    }
  }
  .dialog-content-text {
    height: 50vh;
    overflow-y: auto;
    padding: 3px 15px;
    font-size: 13px;
    color: #666;
    .gist-source {
      margin-bottom: 15px;
      line-height: 1.3;
    }
    .gist-source:last-child {
      margin-bottom: 0;
    }
    .text-list {
      margin-top: 5px;
      color: rgb(0, 141, 101);
    }
    .dialog-description {
      color: #000;
    }
  }
  .dialog-content-text::-webkit-scrollbar {
    display: none;
  }
}
</style>
<style lang="less">
.classifys-detail-search {
  background-color: #e8f1f8;
  .info_search {
    padding: 10px;
    border-radius: 5px !important;
    .van-field__control {
      background-color: #ffffff !important;
    }
  }
}
</style>